<script setup>
import { ref } from 'vue';
import breadcrumb from "@/views/head/breadCrumb.vue"


const input = ref("")
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tor',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 1888889, Grove St, Los Angeles',
  }
]
import { Search,Edit,Delete,User } from '@element-plus/icons-vue';

//添加的弹窗
const dialogVisible = ref(false);

//删除的弹窗
const confirmDel = ref(false);
</script>

<template>
<!-- 顶部导航栏 -->
<breadcrumb></breadcrumb>

<!-- 搜索功能 -->
<div class="head_border">
    <el-row :gutter="20">
        <el-col :span="7">
            关键字 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="用户名/姓名/电话号码" />
        </el-col>
        <el-col :span="8">
            角色 &nbsp; 
            <el-select v-model="value" placeholder="请选择" style="width: 300px">
                <el-option></el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            岗位 &nbsp; 
            <el-select v-model="value" placeholder="请选择" style="width: 300px">
                <el-option></el-option>
            </el-select>
        </el-col>
    </el-row>

    <br>

    <el-row :gutter="20">
        <el-col span="8">
            <el-button type="primary" icon="Search">搜索</el-button>
            <el-button icon="refresh">重置</el-button>
        </el-col>
    </el-row>
</div>

<!-- 添加功能 -->
<el-row class="main_border">
    <el-col>
      <el-button type="success" icon="plus" @click="dialogVisible = true">添加</el-button>
    </el-col>
</el-row >


<!-- 列表的渲染 -->
<el-table :data="tableData" border style="width: 100%">
  <el-table-column prop="date" label="序列" width="200"/>
    <el-table-column prop="name" label="用户名" width="200"/>
    <el-table-column prop="name" label="姓名"  width="200"/>
    <el-table-column prop="name" label="手机"  width="200"/>
    <el-table-column prop="name" label="岗位" width="200"/>
    <el-table-column prop="name" label="部门"  width="200"/>
    <el-table-column prop="name" label="所属角色"  width="200"/>
    <el-table-column prop="name" label="状态"  width="200">
      <el-switch v-model="status" />
    </el-table-column>
    <el-table-column prop="name" label="创建时间"  width="200"/>
    <el-table-column fixed="right" label="操作" min-width="200">
      <template #default>
        <!-- 修改按钮 -->
        <el-tooltip content="修改" placement="top">
            <el-button type="primary" icon="edit" circle ></el-button>
        </el-tooltip>
         <!-- 删除按钮 -->
         <el-tooltip content="删除" placement="top">
            <el-button type="danger" icon="delete" @click="confirmDel = true" circle></el-button>  
        </el-tooltip>
        <!-- 分配人员按钮 -->
        <el-tooltip content="分配人员" placement="top">
            <el-button type="warning" icon="user" circle></el-button>  
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>



<!-- 底部分页栏 -->
<div class="pagination-container">
    <el-pagination
    size="small"
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[5,10,20,30,40,50,100]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="10"
      @size-change="tableData"
      @current-change="handleCurrentChange"
    />
  </div>



  <!-- 添加弹窗 -->
  <el-dialog
  class="add"
    v-model="dialogVisible"
    title="添加员工"
    width="40%"
    :before-close="handleClose"
    :center = "true"
  >c
    <el-row :gutter="20" class="elrowOne">
      <el-col span="20">
        用户名 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="请输入用户名" />
      </el-col>
      <el-col span="20">
        姓名 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="请输入姓名" />
      </el-col>
      <el-col span="20">
        手机 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="请输入手机" />
      </el-col>
      <el-col span="20">
        岗位 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="请输入岗位" />
      </el-col>
      <el-col span="20">
        部门 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="请输入部门" />
      </el-col>
      <el-col span="20">
        所属角色 &nbsp; <el-input v-model="input" style="width: 240px" placeholder="请输入所属角色" />
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确定</el-button
        >
      </span>
    </template>
  </el-dialog>

   <!-- 删除弹窗 -->
   <el-dialog
    v-model="confirmDel"
    title="删除提示"
    width="500"
    :before-close="handleClose"
  >
    <span>您是否确认删除</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="confirmDel = false">取消</el-button>
        <el-button type="primary" @click="confirmDel = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.head_border{
    border: 1px solid rgb(223, 223, 223);
    padding: 10px;
}
.main_border{
    border: 1px solid rgb(223, 223, 223);
    margin-top: 5px;
    padding: 10px;
}
.bottom_border{
    border: 1px solid rgb(223, 223, 223);
    margin-top: 5px;
    padding: 10px;
}
.el-table{
    margin-top: 5px;
    margin-bottom: 10px;
}
.el-table-column{
    text-align: center;
}

.elrowOne .el-col{
  padding: 10px;
  
}

.elrowOne{
  padding: auto;
  margin: auto;
  text-align: center;
}

.pagination-container + .pagination-container {
  margin-top: 10px;
}
.pagination-container .demonstration {
  margin-bottom: 16px;
}

.pagination-container {
  display: flex;
  justify-content: center;
}
 


</style>